<html lang='zh-CN'>
        <head >
        <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title >AI问答系统 - 仪表盘</title>
<script src='https://res.gemcoder.com/js/reload.js'></script>
<script src='https://cdn.tailwindcss.com'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js'></script>
<!-- Tailwind配置 -->
<script >tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        // 仪表盘主蓝色
        secondary: '#10B981',
        // 仪表盘绿色
        success: '#10B981',
        // 仪表盘成功色
        warning: '#F59E0B',
        // 仪表盘警告色
        danger: '#EF4444',
        // 仪表盘危险色
        info: '#3B82F6',
        // 仪表盘信息色
        dark: '#1F2937',
        // 仪表盘深色
        'dark-2': '#4B5563',
        // 仪表盘次要深色
        'light-1': '#F3F4F6',
        // 仪表盘浅色背景
        'light-2': '#E5E7EB',
        // 仪表盘边框色
        'light-3': '#9CA3AF' // 仪表盘禁用文本色
      },
      fontFamily: {
        inter: ['Inter', 'system-ui', 'sans-serif']
      },
      boxShadow: {
        'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.08)',
        'hover': '0 4px 20px rgba(0, 0, 0, 0.1)'
      }
    }
  }
};</script>
<style type='text/tailwindcss'>
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .transition-bg {
                transition: background-color 0.2s ease-in-out;
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .sidebar-item {
                @apply flex items-center px-4 py-3 text-dark-2 hover:bg-light-1 rounded-r-md transition-all-300 mb-1;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-all-300 shadow-sm hover:shadow;
            }
            .btn-outline {
                @apply border border-light-2 text-dark-2 px-4 py-2 rounded-md hover:bg-light-1 transition-all-300;
            }
            .table-row-hover {
                @apply hover:bg-light-1 transition-bg;
            }
            .form-input {
                @apply w-full px-3 py-2 border border-light-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary;
            }
            .form-select {
                @apply w-full px-3 py-2 border border-light-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none bg-white;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
        }
    </style>
    </head>
<body class='font-inter bg-light-1 text-dark overflow-hidden h-screen flex flex-col'>
        <!-- 顶部导航栏 -->
<header class='bg-white shadow-sm z-10 h-16 flex items-center justify-between px-4 md:px-6'>
        <div class='flex items-center'>
        <button class='mr-4 text-dark-2 hover:text-primary transition-all-300' id='sidebar-toggle'>
        </button>
<div class='flex items-center gap-3' style>
        <div class='w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white' style='background-color:#4a90e2ff'>
        <i class='fas fa-robot text-xl'>
        </i>
    </div>
<h1 class='text-xl font-bold' style>
        AI问答管理系统
    </h1>
    </div>
    </div>
<div class='flex items-center gap-6' data-selectorname='#id-1x411'>
        <button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-bell text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center'>
        3
    </span>
    </button>
<button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-envelope text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center'>
        5
    </span>
    </button>
<div class='flex items-center gap-3 cursor-pointer group'>
        <img alt='用户头像' class='w-10 h-10 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d5b746e6df920d562920498d632da9fe.png'/>
<div class='hidden md:block'>
        <p class='font-medium'>
        管理员
    </p>
<p class='text-xs text-gray-500'>
        系统管理员
    </p>
    </div>
<i class='fas fa-chevron-down text-xs text-gray-500 group-hover:text-primary transition-colors'>
        </i>
    </div>
    </div>
    </header>
<div class='flex flex-1 overflow-hidden'>
        <!-- 侧边栏 -->
<aside class='w-64 bg-white shadow-sm h-[calc(100vh-4rem)] transition-all duration-300 transform -translate-x-full md:translate-x-0 fixed md:relative z-10 overflow-y-auto scrollbar-hide' id='sidebar'>
        <nav class='p-4'>
        <div class='mb-6' data-ytextravalue='extra-tsaivk65a'>
        <p class='text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4' data-ytoriginindex='0' data-ytindex='0'>
        主导航
    </p>
<a class='sidebar-item flex items-center' href='javascript:void(0);' data-ytoriginindex='1' data-ytindex='1'>
        <i class='fas fa-tachometer-alt w-5 text-center mr-3'>
        </i>
<span >
        仪表盘
    </span>
    </a>
<a class='sidebar-item flex items-center' data-ytparentvalue='extra-tsaivk65a' data-ytoriginindex='5' data-ytindex='2' style='opacity: 1; color: rgb(75, 85, 99); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;'>
        <i class='fas fa-file-alt w-5 text-center mr-3'>
        </i>
<span >
        文档管理
    </span>
    </a>
<a class='sidebar-item flex items-center' href='javascript:void(0);' data-ytoriginindex='2' data-ytindex='3'>
        <i class='fas fa-history w-5 text-center mr-3'>
        </i>
<span >
        历史对话
    </span>
    </a>
<a class='sidebar-item flex items-center' data-ytoriginindex='4' data-ytindex='5' data-ytparentvalue='extra-tsaivk65a' style='opacity: 1; color: rgb(75, 85, 99); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;'>
        <i class='fas fa-users w-5 text-center mr-3'>
        </i>
<span >
        用户管理
    </span>
    </a>
<a class='sidebar-item sidebar-item-active flex items-center' href='javascript:void(0);' data-ytoriginindex='3' data-ytindex='4'>
        <i class='fas fa-lock w-5 text-center mr-3'>
        </i>
<span >
        权限管理
    </span>
    </a>
    </div>
<div class='mb-6'>
        <p class='text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4'>
        系统
    </p>
<a class='sidebar-item flex items-center' href='javascript:void(0);'>
        <i class='fas fa-cog w-5 text-center mr-3'>
        </i>
<span >
        系统设置
    </span>
    </a>
<a class='sidebar-item flex items-center' href='javascript:void(0);'>
        <i class='fas fa-question-circle w-5 text-center mr-3'>
        </i>
<span >
        帮助中心
    </span>
    </a>
    </div>
<div class='mt-8 p-4 bg-primary/5 rounded-xl'>
        <div class='flex items-center gap-3 mb-3'>
        <i class='fas fa-lightbulb text-primary text-xl'>
        </i>
<h3 class='font-medium'>
        AI能力配置
    </h3>
    </div>
<p class='text-sm text-gray-600 mb-4'>
        调整AI模型参数和RAG配置以优化问答效果
    </p>
<a class='btn-primary w-full flex items-center justify-center' href='javascript:void(0);'>
        <i class='fas fa-sliders-h mr-2'>
        </i>
<span >
        配置模型
    </span>
    </a>
    </div>
    </nav>
    </aside>
<!-- 主内容区 -->
<main class='flex-1 overflow-y-auto bg-light-1 p-4 md:p-6'>
        <!-- 页面标题 -->
<div class='mb-6'>
        <h2 class='text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark'>
        权限管理
    </h2>
<p class='text-dark-2 mt-1'>
        管理系统中的角色和权限设置
    </p>
    </div>
<!-- 内容卡片 -->
<div class='bg-white rounded-lg shadow-card mb-6 overflow-hidden'>
        <!-- 卡片头部 -->
<div class='p-4 md:p-6 border-b border-light-2 flex flex-col md:flex-row md:items-center justify-between gap-4'>
        <div >
        <h3 class='text-lg font-semibold text-dark'>
        角色列表
    </h3>
<p class='text-sm text-dark-2 mt-1'>
        管理系统中的用户角色及其权限
    </p>
    </div>
<div class='flex items-center gap-3'>
        <div class='relative'>
        <input class='form-input pl-10 text-sm w-full md:w-64' placeholder='搜索角色...' type='text'/>
<i class='fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-light-3'>
        </i>
    </div>
<button class='btn-primary flex items-center' id='add-role-btn'>
        <i class='fas fa-plus mr-2'>
        </i>
<span >
        新增角色
    </span>
    </button>
    </div>
    </div>
<!-- 角色表格 -->
<div class='overflow-x-auto'>
        <table class='w-full'>
        <thead >
        <tr class='bg-light-1 text-left text-sm text-dark-2'>
        <th class='px-4 md:px-6 py-3 font-medium'>
        角色名称
    </th>
<th class='px-4 md:px-6 py-3 font-medium'>
        角色标识
    </th>
<th class='px-4 md:px-6 py-3 font-medium'>
        用户数量
    </th>
<th class='px-4 md:px-6 py-3 font-medium'>
        创建时间
    </th>
<th class='px-4 md:px-6 py-3 font-medium'>
        状态
    </th>
<th class='px-4 md:px-6 py-3 font-medium text-right'>
        操作
    </th>
    </tr>
    </thead>
<tbody >
        <tr class='border-b border-light-2 table-row-hover'>
        <td class='px-4 md:px-6 py-4'>
        <div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3'>
        <i class='fas fa-user-shield'>
        </i>
    </div>
<div >
        <div class='font-medium'>
        超级管理员
    </div>
<div class='text-xs text-dark-2'>
        拥有系统全部权限
    </div>
    </div>
    </div>
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        admin
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        1
    </td>
<td class='px-4 md:px-6 py-4 text-sm text-dark-2'>
        2023-01-15 09:30
    </td>
<td class='px-4 md:px-6 py-4'>
        <span class='badge bg-success/10 text-success'>
        启用
    </span>
    </td>
<td class='px-4 md:px-6 py-4 text-right'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80 transition-all-300' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='权限设置'>
        <i class='fas fa-key'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='查看用户'>
        <i class='fas fa-users'>
        </i>
    </button>
<button class='text-dark-2 hover:text-danger transition-all-300' disabled title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='border-b border-light-2 table-row-hover'>
        <td class='px-4 md:px-6 py-4'>
        <div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-info/10 flex items-center justify-center text-info mr-3'>
        <i class='fas fa-user-tie'>
        </i>
    </div>
<div >
        <div class='font-medium'>
        内容管理员
    </div>
<div class='text-xs text-dark-2'>
        管理文档和知识库
    </div>
    </div>
    </div>
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        content_admin
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        3
    </td>
<td class='px-4 md:px-6 py-4 text-sm text-dark-2'>
        2023-02-20 14:15
    </td>
<td class='px-4 md:px-6 py-4'>
        <span class='badge bg-success/10 text-success'>
        启用
    </span>
    </td>
<td class='px-4 md:px-6 py-4 text-right'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80 transition-all-300' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='权限设置'>
        <i class='fas fa-key'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='查看用户'>
        <i class='fas fa-users'>
        </i>
    </button>
<button class='text-dark-2 hover:text-danger transition-all-300' title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='border-b border-light-2 table-row-hover'>
        <td class='px-4 md:px-6 py-4'>
        <div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mr-3'>
        <i class='fas fa-user-check'>
        </i>
    </div>
<div >
        <div class='font-medium'>
        普通用户
    </div>
<div class='text-xs text-dark-2'>
        基础使用权限
    </div>
    </div>
    </div>
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        user
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        42
    </td>
<td class='px-4 md:px-6 py-4 text-sm text-dark-2'>
        2023-01-15 09:30
    </td>
<td class='px-4 md:px-6 py-4'>
        <span class='badge bg-success/10 text-success'>
        启用
    </span>
    </td>
<td class='px-4 md:px-6 py-4 text-right'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80 transition-all-300' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='权限设置'>
        <i class='fas fa-key'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='查看用户'>
        <i class='fas fa-users'>
        </i>
    </button>
<button class='text-dark-2 hover:text-danger transition-all-300' disabled title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='border-b border-light-2 table-row-hover'>
        <td class='px-4 md:px-6 py-4'>
        <div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-3'>
        <i class='fas fa-user-graduate'>
        </i>
    </div>
<div >
        <div class='font-medium'>
        测试用户
    </div>
<div class='text-xs text-dark-2'>
        测试功能权限
    </div>
    </div>
    </div>
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        test_user
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        5
    </td>
<td class='px-4 md:px-6 py-4 text-sm text-dark-2'>
        2023-03-10 11:20
    </td>
<td class='px-4 md:px-6 py-4'>
        <span class='badge bg-warning/10 text-warning'>
        测试
    </span>
    </td>
<td class='px-4 md:px-6 py-4 text-right'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80 transition-all-300' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='权限设置'>
        <i class='fas fa-key'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='查看用户'>
        <i class='fas fa-users'>
        </i>
    </button>
<button class='text-dark-2 hover:text-danger transition-all-300' title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='border-b border-light-2 table-row-hover'>
        <td class='px-4 md:px-6 py-4'>
        <div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-danger/10 flex items-center justify-center text-danger mr-3'>
        <i class='fas fa-user-lock'>
        </i>
    </div>
<div >
        <div class='font-medium'>
        访客
    </div>
<div class='text-xs text-dark-2'>
        有限的访问权限
    </div>
    </div>
    </div>
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        visitor
    </td>
<td class='px-4 md:px-6 py-4 text-sm'>
        18
    </td>
<td class='px-4 md:px-6 py-4 text-sm text-dark-2'>
        2023-04-05 16:45
    </td>
<td class='px-4 md:px-6 py-4'>
        <span class='badge bg-light-2 text-dark-2'>
        禁用
    </span>
    </td>
<td class='px-4 md:px-6 py-4 text-right'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80 transition-all-300' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='权限设置'>
        <i class='fas fa-key'>
        </i>
    </button>
<button class='text-dark-2 hover:text-dark transition-all-300' title='查看用户'>
        <i class='fas fa-users'>
        </i>
    </button>
<button class='text-dark-2 hover:text-danger transition-all-300' title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
<!-- 分页 -->
<div class='p-4 md:p-6 border-t border-light-2 flex flex-col md:flex-row md:items-center justify-between gap-4'>
        <div class='text-sm text-dark-2'>
        显示
<span class='font-medium'>
        1
    </span>
到
<span class='font-medium'>
        5
    </span>
条，共
<span class='font-medium'>
        8
    </span>
条记录
    </div>
<div class='flex items-center'>
        <button class='w-9 h-9 flex items-center justify-center rounded-md border border-light-2 text-dark-2 hover:bg-light-1 transition-all-300' disabled>
        <i class='fas fa-chevron-left text-xs'>
        </i>
    </button>
<button class='w-9 h-9 flex items-center justify-center rounded-md bg-primary text-white mx-1'>
        1
    </button>
<button class='w-9 h-9 flex items-center justify-center rounded-md border border-light-2 text-dark-2 hover:bg-light-1 transition-all-300 mx-1'>
        2
    </button>
<button class='w-9 h-9 flex items-center justify-center rounded-md border border-light-2 text-dark-2 hover:bg-light-1 transition-all-300'>
        <i class='fas fa-chevron-right text-xs'>
        </i>
    </button>
    </div>
    </div>
    </div>
<!-- 权限分配统计 -->
<div class='grid grid-cols-1 md:grid-cols-3 gap-6 mb-6'>
        <div class='bg-white rounded-lg shadow-card p-4 md:p-6'>
        <div class='flex items-start justify-between'>
        <div >
        <p class='text-sm text-dark-2'>
        总角色数
    </p>
<h4 class='text-2xl font-bold text-dark mt-1'>
        8
    </h4>
<p class='text-xs text-success mt-2 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
较上月增长 12%
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary'>
        <i class='fas fa-user-tag text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 h-16' id='roleChart'>
        </div>
    </div>
<div class='bg-white rounded-lg shadow-card p-4 md:p-6'>
        <div class='flex items-start justify-between'>
        <div >
        <p class='text-sm text-dark-2'>
        权限总数
    </p>
<h4 class='text-2xl font-bold text-dark mt-1'>
        42
    </h4>
<p class='text-xs text-success mt-2 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
新增 5 项权限
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-info/10 flex items-center justify-center text-info'>
        <i class='fas fa-shield-alt text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 h-16' id='permissionChart'>
        </div>
    </div>
<div class='bg-white rounded-lg shadow-card p-4 md:p-6'>
        <div class='flex items-start justify-between'>
        <div >
        <p class='text-sm text-dark-2'>
        权限分配率
    </p>
<h4 class='text-2xl font-bold text-dark mt-1'>
        87%
    </h4>
<p class='text-xs text-danger mt-2 flex items-center'>
        <i class='fas fa-arrow-down mr-1'>
        </i>
较上月下降 3%
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success'>
        <i class='fas fa-chart-pie text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 h-16' id='allocationChart'>
        </div>
    </div>
    </div>
<!-- 权限设置卡片 -->
<div class='bg-white rounded-lg shadow-card overflow-hidden'>
        <!-- 卡片头部 -->
<div class='p-4 md:p-6 border-b border-light-2'>
        <div class='flex flex-col md:flex-row md:items-center justify-between gap-4'>
        <div >
        <h3 class='text-lg font-semibold text-dark'>
        权限设置
    </h3>
<p class='text-sm text-dark-2 mt-1'>
        为不同模块配置详细权限
    </p>
    </div>
<div class='flex items-center gap-3'>
        <div class='relative'>
        <select class='form-select pl-3 pr-10 text-sm'>
        <option >
        选择角色
    </option>
<option >
        超级管理员
    </option>
<option >
        内容管理员
    </option>
<option >
        普通用户
    </option>
<option >
        测试用户
    </option>
<option >
        访客
    </option>
    </select>
<i class='fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-light-3 pointer-events-none'>
        </i>
    </div>
<button class='btn-primary flex items-center'>
        <i class='fas fa-save mr-2'>
        </i>
<span >
        保存设置
    </span>
    </button>
    </div>
    </div>
    </div>
<!-- 权限设置内容 -->
<div class='p-4 md:p-6'>
        <!-- 权限选项卡 -->
<div class='border-b border-light-2 mb-6'>
        <div class='flex flex-wrap -mb-px'>
        <button class='tab-btn active py-3 px-4 text-primary border-b-2 border-primary font-medium text-sm'>
        全部权限
    </button>
<button class='tab-btn py-3 px-4 text-dark-2 border-b-2 border-transparent hover:text-dark transition-all-300 font-medium text-sm'>
        仪表盘
    </button>
<button class='tab-btn py-3 px-4 text-dark-2 border-b-2 border-transparent hover:text-dark transition-all-300 font-medium text-sm'>
        用户管理
    </button>
<button class='tab-btn py-3 px-4 text-dark-2 border-b-2 border-transparent hover:text-dark transition-all-300 font-medium text-sm'>
        文档管理
    </button>
<button class='tab-btn py-3 px-4 text-dark-2 border-b-2 border-transparent hover:text-dark transition-all-300 font-medium text-sm'>
        系统设置
    </button>
    </div>
    </div>
<!-- 权限列表 -->
<div class='space-y-6'>
        <!-- 仪表盘权限 -->
<div class='permission-group'>
        <div class='flex items-center justify-between mb-4'>
        <div class='flex items-center'>
        <input class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='dashboard-all' type='checkbox'/>
<label class='ml-2 font-medium text-dark' for='dashboard-all'>
        仪表盘
    </label>
    </div>
<span class='text-xs text-dark-2'>
        全部权限
    </span>
    </div>
<div class='pl-6 border-l-2 border-light-2 ml-2 space-y-4'>
        <div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='dashboard-view' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='dashboard-view'>
        查看仪表盘
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许查看系统仪表盘数据
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='dashboard-stat' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='dashboard-stat'>
        查看统计数据
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许查看详细统计分析
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='dashboard-export' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='dashboard-export'>
        导出数据
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许导出仪表盘数据
    </span>
    </div>
    </div>
    </div>
<!-- 用户管理权限 -->
<div class='permission-group'>
        <div class='flex items-center justify-between mb-4'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='user-all' type='checkbox'/>
<label class='ml-2 font-medium text-dark' for='user-all'>
        用户管理
    </label>
    </div>
<span class='text-xs text-dark-2'>
        全部权限
    </span>
    </div>
<div class='pl-6 border-l-2 border-light-2 ml-2 space-y-4'>
        <div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='user-view' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='user-view'>
        查看用户
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许查看用户列表和详情
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='user-add' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='user-add'>
        添加用户
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许创建新用户
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='user-edit' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='user-edit'>
        编辑用户
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许修改用户信息
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='user-delete' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='user-delete'>
        删除用户
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许删除用户
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='user-role' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='user-role'>
        分配角色
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许为用户分配角色
    </span>
    </div>
    </div>
    </div>
<!-- 文档管理权限 -->
<div class='permission-group'>
        <div class='flex items-center justify-between mb-4'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='doc-all' type='checkbox'/>
<label class='ml-2 font-medium text-dark' for='doc-all'>
        文档管理
    </label>
    </div>
<span class='text-xs text-dark-2'>
        全部权限
    </span>
    </div>
<div class='pl-6 border-l-2 border-light-2 ml-2 space-y-4'>
        <div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='doc-view' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='doc-view'>
        查看文档
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许查看文档列表和内容
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='doc-upload' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='doc-upload'>
        上传文档
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许上传新文档
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='doc-edit' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='doc-edit'>
        编辑文档
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许修改文档内容
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='doc-delete' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='doc-delete'>
        删除文档
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许删除文档
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='doc-category' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='doc-category'>
        管理分类
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许管理文档分类
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='doc-vector' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='doc-vector'>
        管理向量化
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许管理文档向量化设置
    </span>
    </div>
    </div>
    </div>
<!-- 对话管理权限 -->
<div class='permission-group'>
        <div class='flex items-center justify-between mb-4'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='chat-all' type='checkbox'/>
<label class='ml-2 font-medium text-dark' for='chat-all'>
        对话管理
    </label>
    </div>
<span class='text-xs text-dark-2'>
        全部权限
    </span>
    </div>
<div class='pl-6 border-l-2 border-light-2 ml-2 space-y-4'>
        <div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='chat-view' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='chat-view'>
        查看对话
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许查看对话记录
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='chat-delete' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='chat-delete'>
        删除对话
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许删除对话记录
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='chat-export' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='chat-export'>
        导出对话
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许导出对话记录
    </span>
    </div>
    </div>
    </div>
<!-- 系统设置权限 -->
<div class='permission-group'>
        <div class='flex items-center justify-between mb-4'>
        <div class='flex items-center'>
        <input class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='system-all' type='checkbox'/>
<label class='ml-2 font-medium text-dark' for='system-all'>
        系统设置
    </label>
    </div>
<span class='text-xs text-dark-2'>
        全部权限
    </span>
    </div>
<div class='pl-6 border-l-2 border-light-2 ml-2 space-y-4'>
        <div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='system-view' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='system-view'>
        查看设置
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许查看系统设置
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='system-edit' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='system-edit'>
        编辑设置
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许修改系统设置
    </span>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <input checked class='w-4 h-4 text-primary rounded border-light-2 focus:ring-primary/30' id='system-log' type='checkbox'/>
<label class='ml-2 text-sm text-dark' for='system-log'>
        查看日志
    </label>
    </div>
<span class='text-xs text-dark-2'>
        允许查看系统日志
    </span>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </main>
    </div>
<!-- 新增角色模态框 -->
<div class='fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden' id='add-role-modal'>
        <div class='bg-white rounded-lg shadow-lg w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0' id='modal-content'>
        <div class='p-4 md:p-6 border-b border-light-2 flex items-center justify-between'>
        <h3 class='text-lg font-semibold text-dark'>
        新增角色
    </h3>
<button class='text-dark-2 hover:text-dark transition-all-300' id='close-modal'>
        <i class='fas fa-times'>
        </i>
    </button>
    </div>
<div class='p-4 md:p-6'>
        <form id='add-role-form'>
        <div class='mb-4'>
        <label class='block text-sm font-medium text-dark mb-2' for='role-name'>
        角色名称
    </label>
<input class='form-input' id='role-name' placeholder='输入角色名称' type='text'/>
    </div>
<div class='mb-4'>
        <label class='block text-sm font-medium text-dark mb-2' for='role-code'>
        角色标识
    </label>
<input class='form-input' id='role-code' placeholder='输入角色标识，如：content_admin' type='text'/>
    </div>
<div class='mb-4'>
        <label class='block text-sm font-medium text-dark mb-2' for='role-desc'>
        角色描述
    </label>
<textarea class='form-input' id='role-desc' placeholder='输入角色描述信息' rows='3'>
        </textarea>
    </div>
<div class='mb-4'>
        <label class='block text-sm font-medium text-dark mb-2'>
        状态
    </label>
<div class='flex items-center space-x-4'>
        <label class='inline-flex items-center'>
        <input checked class='w-4 h-4 text-primary border-light-2 focus:ring-primary/30' name='role-status' type='radio' value='1'/>
<span class='ml-2 text-sm text-dark'>
        启用
    </span>
    </label>
<label class='inline-flex items-center'>
        <input class='w-4 h-4 text-primary border-light-2 focus:ring-primary/30' name='role-status' type='radio' value='0'/>
<span class='ml-2 text-sm text-dark'>
        禁用
    </span>
    </label>
    </div>
    </div>
<div class='mb-4'>
        <label class='block text-sm font-medium text-dark mb-2'>
        复制权限
    </label>
<div class='relative'>
        <select class='form-select text-sm'>
        <option value>
        不复制
    </option>
<option value='admin'>
        超级管理员
    </option>
<option value='content_admin'>
        内容管理员
    </option>
<option value='user'>
        普通用户
    </option>
<option value='test_user'>
        测试用户
    </option>
<option value='visitor'>
        访客
    </option>
    </select>
<i class='fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-light-3 pointer-events-none'>
        </i>
    </div>
    </div>
    </form>
    </div>
<div class='p-4 md:p-6 border-t border-light-2 flex justify-end gap-3'>
        <button class='btn-outline' id='cancel-add-role'>
        取消
    </button>
<button class='btn-primary' id='confirm-add-role'>
        创建角色
    </button>
    </div>
    </div>
    </div>
<script >// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function () {
  // 侧边栏切换
  var sidebarToggle = document.getElementById('sidebar-toggle');
  var sidebar = document.getElementById('sidebar');
  sidebarToggle.addEventListener('click', function () {
    sidebar.classList.toggle('-translate-x-full');
  });
  // 新增角色模态框
  var addRoleBtn = document.getElementById('add-role-btn');
  var addRoleModal = document.getElementById('add-role-modal');
  var modalContent = document.getElementById('modal-content');
  var closeModal = document.getElementById('close-modal');
  var cancelAddRole = document.getElementById('cancel-add-role');
  var confirmAddRole = document.getElementById('confirm-add-role');
  function openModal() {
    addRoleModal.classList.remove('hidden');
    setTimeout(function () {
      modalContent.classList.remove('scale-95', 'opacity-0');
      modalContent.classList.add('scale-100', 'opacity-100');
    }, 10);
  }
  function closeModalFunc() {
    modalContent.classList.remove('scale-100', 'opacity-100');
    modalContent.classList.add('scale-95', 'opacity-0');
    setTimeout(function () {
      addRoleModal.classList.add('hidden');
    }, 300);
  }
  addRoleBtn.addEventListener('click', openModal);
  closeModal.addEventListener('click', closeModalFunc);
  cancelAddRole.addEventListener('click', closeModalFunc);
  confirmAddRole.addEventListener('click', function () {
    // 这里添加表单提交逻辑
    alert('角色创建成功！');
    closeModalFunc();
  });
  // 点击模态框外部关闭
  addRoleModal.addEventListener('click', function (e) {
    if (e.target === addRoleModal) {
      closeModalFunc();
    }
  });
  // 权限选项卡切换
  var tabBtns = document.querySelectorAll('.tab-btn');
  tabBtns.forEach(function (btn) {
    btn.addEventListener('click', function () {
      // 移除所有活动状态
      tabBtns.forEach(function (b) {
        b.classList.remove('active', 'text-primary', 'border-primary');
        b.classList.add('text-dark-2', 'border-transparent');
      });
      // 添加当前活动状态
      btn.classList.add('active', 'text-primary', 'border-primary');
      btn.classList.remove('text-dark-2', 'border-transparent');
    });
  });
  // 全选权限逻辑
  var permissionGroups = document.querySelectorAll('.permission-group');
  permissionGroups.forEach(function (group) {
    var groupCheckbox = group.querySelector('input[type="checkbox"]');
    var childCheckboxes = group.querySelectorAll('.pl-6 input[type="checkbox"]');
    // 全选/取消全选
    groupCheckbox.addEventListener('change', function () {
      childCheckboxes.forEach(function (checkbox) {
        checkbox.checked = groupCheckbox.checked;
      });
    });
    // 子复选框变化时更新全选状态
    childCheckboxes.forEach(function (checkbox) {
      checkbox.addEventListener('change', function () {
        var allChecked = Array.from(childCheckboxes).every(function (cb) {
          return cb.checked;
        });
        groupCheckbox.checked = allChecked;
      });
    });
  });
  // 初始化图表
  initCharts();
});
// 初始化图表
function initCharts() {
  // 角色统计图表
  var roleChart = echarts.init(document.getElementById('roleChart'));
  roleChart.setOption({
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      data: [3, 5, 4, 6, 7, 8],
      type: 'line',
      lineStyle: {
        color: '#3B82F6',
        // 仪表盘主蓝色
        width: 2
      },
      symbol: 'none',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(59, 130, 246, 0.2)' // 仪表盘主蓝色透明度20%
        }, {
          offset: 1,
          color: 'rgba(59, 130, 246, 0)' // 完全透明
        }])
      }
    }]
  });
  // 权限统计图表
  var permissionChart = echarts.init(document.getElementById('permissionChart'));
  permissionChart.setOption({
    grid: {
      left: 0,
      right: '4%',
      top: 0,
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      data: [15, 22, 28, 35, 39, 42],
      type: 'bar',
      itemStyle: {
        color: '#3B82F6',
        // 仪表盘主蓝色
        borderRadius: [4, 4, 0, 0]
      },
      barWidth: 4
    }]
  });
  // 权限分配率图表
  var allocationChart = echarts.init(document.getElementById('allocationChart'));
  allocationChart.setOption({
    tooltip: {
      formatter: '{a} <br/>{b}: {c}%'
    },
    series: [{
      name: '分配率',
      type: 'gauge',
      radius: '100%',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#10B981' // 仪表盘绿色
            }, {
              offset: 1,
              color: '#34D399' // 浅绿色
            }]
          }
        }
      },
      axisLine: {
        lineStyle: {
          width: 6,
          color: [[1, 'rgba(0,0,0,0.05)']]
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        width: 60,
        height: 14,
        fontSize: 14,
        color: '#1F2937',
        // 仪表盘深色
        borderColor: 'auto',
        formatter: '{value}%',
        offsetCenter: [0, 0]
      },
      data: [{
        value: 87
      }]
    }]
  });
  // 窗口大小变化时重绘图表
  window.addEventListener('resize', function () {
    roleChart.resize();
    permissionChart.resize();
    allocationChart.resize();
  });
}</script>
    </body>
    </html>